<template>
	<view class="box">
		<canvas canvas-id="canvasIds" class="canvasClass"></canvas>
		<view class="buttons" v-if="downsType">
			<view @click="onImg">
				保存
			</view>
			<view class="" @click="clearImg">
				取消
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['userDetails', 'userQR_Codes', 'userCodes', 'bgs'],
		data() {
			return {
				downsType: false,
				userDetail: {
					nickname: '',
					avatarUrl: ''
				},
				userQR_Code: '',
				userCode: '',
				bg: null
			}
		},
		watch: {
			userDetails(news, old) {
				this.userDetail = news
				if (this.userDetail.nickname.length > 8) {
					this.userDetail.nickname.slice(0, 8)
				}
			},
			userQR_Codes(news, old) {
				this.userQR_Code = news
			},
			userCodes(news, old) {
				this.userCode = news
			},
			bgs(news, old) {
				this.bg = news
			}
		},
		mounted() {
			this.userDetail = this.userDetails
			if (this.userDetail.nickname.length > 8) {
				this.userDetail.nickname.slice(0, 8)
			}
			this.userQR_Code = this.userQR_Codes
			if (this.bgs) {
				this.bg = this.bgs
			}
			if (this.userCodes) {
				this.userCode = this.userCodes
			}
			this.onHuabu()
		},
		methods: {
			//取消
			clearImg() {
				this.$emit('posterChange', false)
			},
			//保存海报
			onImg() {
				uni.showLoading({
					title: "图片生成中"
				})
				uni.canvasToTempFilePath({
					canvasId: 'canvasIds',
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: rest => {
								uni.hideLoading()
								uni.showToast({
									title: "图片保存成功，可以去分享啦~",
									duration: 2000,
									icon: "none",
									success: aaares => {
										this.$emit('posterChange', true)
									}
								})
							},
							fail() {
								uni.showToast({
									title: "保存失败，稍后再试",
									duration: 2000,
									icon: "none"
								})
								uni.hideLoading()
							}
						})
					},
					fail: (err) => {
						uni.showToast({
							title: "保存失败，稍后再试",
							duration: 2000,
							icon: "none"
						})
						console.log(err)
					}
				}, this)
			},
			async onHuabu() {
				uni.showLoading({
					title: "海报生成中..."
				})
				//首先获取屏幕宽度
				let device = uni.getSystemInfoSync();
				let width = device.windowWidth;
				//然后需要确定比例，设计图一般都是750的屏幕，这里是375px
				let wid = width / 375;
				let that = this
				const ctx = uni.createCanvasContext('canvasIds', this)
				ctx.beginPath()
				ctx.rect(37*wid, 0, 300*wid, 500*wid)
				ctx.setFillStyle('#FFFFFF')
				ctx.fill()
				// 背景图--------------------------------------------------------------------------------------------------------------------------
				if (this.bg) {
					let dataimg = await uni.downloadFile({
						url: this.bg
					})
					ctx.drawImage(dataimg[1].tempFilePath, 37*wid, 0, 300*wid, 500*wid)
				}
				ctx.beginPath()
				ctx.setFillStyle('#FFFFFF')
				// ctx.setShadow(0, 0, 15,'#F1F1F1')
				ctx.fillRect(60*wid, 65*wid, 250*wid, 310*wid)
				// ctx.setShadow(10, 50, 50, 'blue')
				// ctx.rect(60, 65 , 250, 250)
				// ctx.setFillStyle('#FFFFFF')
				ctx.fill()

				//头像--------------------------------------------------------------------------------------------------------------------------
				uni.downloadFile({
					url: this.userDetail.avatarUrl,
					success: (res1) => {
						ctx.save()
						ctx.beginPath()
						ctx.arc(185*wid, 65*wid, 45*wid, 0*wid, 2 * Math.PI)
						ctx.clip()
						ctx.drawImage(res1.tempFilePath, 140*wid, 20*wid, 90*wid, 90*wid)
						ctx.restore()
						//二维码-----------------------------------------------------------------------------------------------------------------------------------
						uni.downloadFile({
							url: this.userQR_Code,
							success: (res) => {
								ctx.drawImage(res.tempFilePath, 70*wid, 125*wid, 230*wid, 230*wid)
								//名称-----------------------------------------------------------------------------------------------------------------------------------
								ctx.beginPath()
								ctx.setFontSize(18*wid)
								ctx.setFillStyle('#4285F4');
								if (this.userDetail.nickname.length < 8) {
									let NaNs = 0
									NaNs = Math.floor((8 - this.userDetail.nickname.length) /
										2)
									for (let i = 0; i < NaNs; i++) {
										this.userDetail.nickname = '　' + this.userDetail
											.nickname
									}
								}
								ctx.fillText(this.userDetail.nickname, 120*wid, 405*wid)

								ctx.beginPath()
								ctx.setFontSize(15*wid)
								ctx.setFillStyle('#333333');
								ctx.fillText('这是我的二维码，现在分享给你啦', 75*wid, 445*wid)
								ctx.beginPath()
								ctx.setFontSize(15*wid)
								ctx.setFillStyle('#4285F4');
								if(this.userCode){
									let codeStr = `我的推荐码：${this.userCode}`
									if (this.userCode.length < 8) {
										let NaNs = 0
										NaNs = Math.floor((8 - this.userCode
											.length) / 2)
										for (let i = 0; i < NaNs; i++) {
											codeStr = '　' + codeStr
										}
									}
									ctx.fillText(codeStr, 90*wid, 470*wid)
								}
								uni.hideLoading()
								this.downsType = true

								ctx.draw()
							}
						})
					}
				})

			}
		}
	}
</script>

<style scoped>
	.buttons {
		display: flex;
		justify-content: space-between;
		width: 600rpx;
		margin: 0 auto;
		margin-top: 240rpx;
		color: #FFFFFF;
		text-align: center;

	}

	.buttons>view {
		line-height: 90rpx;
		width: 250rpx;
		border-radius: 50rpx;
	}

	.buttons>view:nth-child(1) {
		background: #FF6F00;
	}

	.buttons>view:nth-child(2) {
		background: #999999;
	}

	.box {
		z-index: 99999999;
		box-sizing: border-box;
		top: 0;
		left: 0;
		padding-top: 5%;
		position: fixed;
		margin: 0 auto;
		height: 100vh;
		width: 100%;
		background: rgba(0, 0, 0, 0.7);
	}

	.canvasClass {
		height: 1000rpx;
		width: 750rpx;
	}
</style>
